<template>
  <div>
    <BHeader />
    <div class="loginBox">
      <div class="pageTit">注册</div>
      <div class="loginWrap">
        <div class="picbox">
          <img class="logpic" src="/img/login.png" alt="" />
          <p class="title">注册<br />Register</p>
        </div>
        <div class="sliceLine"></div>
        <div class="inpbox">
          <div class="loginInp">
            <el-input
              v-model="account"
              placeholder="手机号/邮箱"
              class="account"
              clearable
              type="medium"
              ><i class="el-icon-user el-input__icon" slot="prefix"> </i
            ></el-input>
            <el-input
              placeholder="密码"
              v-model="passwd"
              class="password"
              show-password
            >
              <i class="el-icon-lock el-input__icon" slot="prefix"> </i>
            </el-input>
          </div>
          <div>
            <div style="display: flex; vertical-align: baseline">
              <el-select
                v-model="select"
                placeholder="请选择"
                style="margin-top: 4px"
              >
                <el-option label="中国大陆" value="1"></el-option>
                <el-option label="中国香港" value="2"></el-option>
                <el-option label="中国台湾" value="3"></el-option>
              </el-select>
              <el-input
                placeholder="选填写常用手机号"
                v-model="phone"
                class="account"
              >
              </el-input>
            </div>

            <!-- varifyCode -->
            <el-input placeholder="验证码" class="varifyCode">
              <el-button slot="append" type="primary">
                {{ downSeconds }}
              </el-button>
            </el-input>
          </div>
          <div class="inpOptGroup">
            <div>
              <el-checkbox v-model="isLocal">记住我 </el-checkbox>
              <span style="color: #999; margin-left: 20px"
                >不是自己的电脑上,不要勾选此项</span
              >
            </div>
            <div class="forget" @click="$router.push('/login')">已有账号?</div>
          </div>
            <el-button type="primary" class="optBtns" @click="subReg">注册</el-button>
        </div>
      </div>
    </div>
     <div class="agree">
        登录即代表你同意<a> 用户协议 </a>和
        <a> 隐私政策 </a>
      </div>
    <BFooter />
  </div>
</template>

<script>
import BHeader from "../components/BHeader.vue";
import BFooter from "../components/BFooter.vue";
export default {
  components: { BHeader, BFooter },
  data() {
    return {
      passwd: "",
      account: "",
      phone:"",
      select: "",
      isLocal:false,
      downSeconds: "点击获取验证码",
    };
  },
  methods: {
    subReg() {
      let params=`uname=${this.account}&upwd=${this.passwd}`
      this.axios.post('/myreg',params).then(res=>{
        if(res.data.code==200){
          this.$msg({
            message:'注册成功,为您自动跳转至首页',
            type:'success'
          })
          this.isLocal?localStorage.setItem("uid", this.account):sessionStorage.setItem("uid", this.account)
          this.$router.replace('/')
        }else{
          this.$msg({
            message:res.data.msg,
            type:'warning'
          })
        }
      })
    }
  },
};
</script>
<style>
.inpbox .el-input__inner {
  height: 50px;
  line-height: 50px;
}
.optBtns {
  display: block;
  width: 400px !important;
  margin:  0 auto;
}
</style>
<style lang="scss" scoped>
.loginBox {
  width: 980px;
  margin: -55px auto;
  position: relative;
  border-top: 1px solid #ddd;
  .pageTit {
    position: relative;
    top: -25px;
    text-align: center;
    width: 120px;
    font-size: 38px;
    line-height: 50px;
    background-color: #fff;
    margin: 0 auto;
  }
  .loginWrap {
    display: flex;
    margin: 0 auto;
    .picbox {
      width: 490px;
      position: relative;
      .title {
        color: #fff;
        text-align: center;
        font-size: 24px;
        position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
      }
      .logpic {
        display: block;
        width: 80%;
        margin: auto;
        margin-top: 60px;
        border-radius: 6px;
      }
    }

    .sliceLine {
      margin-top: 20px;
      border-right: 1px solid #ddd;
      height: 367px;
    }
    .inpbox {
      width: 440px;
      padding-left: 49px;
      .typeTab {
        display: flex;
        line-height: 16px;
        align-items: baseline;
        span {
          cursor: pointer;
          user-select: none;
          margin: 20px 10px 20px 0px;
          font-size: 14px;
        }
        span.cur {
          font-size: 16px;
          color: #00a1d6;
        }
      }
      .account {
        // height: 80px;
        margin-top: 4px;
        margin-bottom: 40px;
      }
      .password ,.varifyCode{
        margin-bottom: 20px;
      }
      .inpOptGroup {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .forget {
          color: #00a1d6;
          &:hover{
            cursor: pointer;
          }
        }
      }
    }
  }
}
.agree {
    text-align: center;
    font-size: 12px;
    color: #99a2aa;
    margin: 80px auto 20px auto;
    a {
      color: #00a1d6;
    }
  }
</style>
